<template>
  <Intro/>
    <!--  边框-->
  <e-full-screen-container>
    <div class="biankuang" style="width: 40rem;height: 30rem;padding-top: 0;margin: auto;">
      <div style="position: absolute;left: 50%;transform: translate(-50%);margin-top: -200px;">
        <p style="text-align: center" class="shine"><img src="../assets/image/信息工程學院學生信息管理系統.png" height="150"></p>
      </div>
      <!--    登录二字-->
      <div class="font" style="font-size: xxx-large;">
        登录
      </div>
      <!--    账号密码输入框，带验证-->
      <div style="width: 40rem;padding-top: 3rem;padding-left: 8rem">
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" size="large">
          <el-form-item label="账号&ensp;&ensp;" prop="accountNo">
            <el-input style="margin-left: 1rem; width: 310px"  type="text" v-model="loginForm.accountNo"
                      placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码&ensp;&ensp;" prop="accountPassword">
            <el-input style="margin-left: 1rem; width: 310px" type="password" v-model="loginForm.accountPassword"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="checkCode">
            <el-input v-model="loginForm.checkCode" style="margin-left: 1rem;width: 250px"
                      placeholder="验证码，点击图片刷新"></el-input>
            <el-tag style="margin-left: 0.5rem;cursor:pointer" @click="getCode()">{{ viewCode }}</el-tag>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="this.login('loginForm' )" style="margin-left: 10rem">登录</el-button>
          </el-form-item>
          <el-form-item   >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="videoContainer">
      <video class="fullscreenVideo" id="bgVid" playsinline="" autoplay="" muted="" loop="">
        <source src="../assets/video/宣传片.mp4" type="video/mp4">
      </video>
    </div>
  </e-full-screen-container>

</template>

<script>

import request from "@/util/request.js";
import router from "@/router/index.js";
import { EDigitalFlop, EFullScreenContainer } from 'e-datav-vue3';
import Intro from "@/component/intro.vue";
export default{
name:"login",
  components: {Intro},
  data() {
    return {
      // 用户信息
      information: {},
      // 验证码
      viewCode: '',
      // 登录信息/验证信息
      loginForm: {
        accountNo: '',
        accountPassword: '',
        checkCode: '',
      },
      rules: {
        accountPassword: [
          {required: true, trigger: 'blur', message: "密码不能为空"}
        ],
        accountNo: [
          {required: true, trigger: 'blur', message: "请输入账号"}
        ],
        checkCode: [
          {required: true, trigger: 'blur', message: "请先输入验证码"}
        ]
      },
    };
  },//data
  created() {
    this.getCode()
  },//created
  methods: {
    //获取验证码
    getCode: function () {
      this.viewCode = '' // 验证码信息置空
      const allChar = '123456789ABCDEFGHIJKLMNPQRSTUVWXYZ'//25个英文字母+9个数字[0,33]
      const codeArray = allChar.split('')
      for (let i = 0; i < 4; i++) {
        this.viewCode = this.viewCode + codeArray.at(Math.floor(Math.random() * 34))
      }
    },
    // 登录按钮

    login(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
      if (this.loginForm.checkCode.toUpperCase() === '' || this.loginForm.checkCode.toUpperCase() !== this.viewCode) {
        this.$message.error('验证码不正确！')
        this.getCode()
        return
      }
      request.post("/account/login" , this.loginForm).then(res => {
        if (res.data.code === '200') {
          this.information = res.data.data;
          localStorage.setItem("user", JSON.stringify(res.data.data));
          this.$router.push("/")
        } else {
          this.$message.error("用户名/密码错误")
          this.getCode()
          return false;
        }
      })
        }
      })
    },
  }
}

</script>


<style scoped>

.biankuang {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 45px;
  background: rgba(137, 225, 225, 0.32);
  box-shadow: 28px 28px 57px rgba(98, 245, 239, 0.59),
  -28px -28px 57px rgba(128, 241, 241, 0.11);
}

.font {
  /*字体位置*/
  padding-left: 45%;
  padding-top: 2rem;
  /*字体样式设置*/
  text-shadow: 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%); /*多个叠加*/
  font-size: 35px;
  color: #fff;
}

.videoContainer{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;
}

.videoContainer:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  top: 0;
  left: 0;
  background: rgba(25,29,34,.65);
  background-size: cover;
}

.fullscreenVideo{
  width: 100%;
  height: 100%;
  object-fit: fill
}

</style>
